<template>
	<div class="functionBox">
		<div v-for="item in unfoldData" :key="item.id" v-if="unfoldData && item.list.length > 0">
			<div class="functionTitle">
				<div>{{ item.title }}</div>
				<div class="managementBtn" @click="clickguanli(item)"><i class="el-icon-plus managementBtnIcon"></i>管理</div>
			</div>
			<div class="functionList" v-if="item.list.length > 0">
				<ul>
					<li v-for="item in item.list" :key="item.id" @click="itemClick(item)">
						<el-image class="listImage" :src="item.menuIcon?item.menuIcon:$globalData.defaultImg" fit="cover"></el-image>
						<div class="listTitle">{{item.menuName}}</div>
					</li>
				</ul>
			</div>
			<div v-else class="noData">暂无数据</div>
		</div>
		<el-collapse>
			<el-collapse-item title="产品市场" v-for="item in foldData" :key="item.id" :name="item.id" v-if="foldData && item.list.length > 0">
				<div slot="title" class="functionTitle collapseTitle">
					{{ item.title }}
					<div class="managementBtn managementBtnBoxRight"><i class="el-icon-plus managementBtnIcon"></i>管理</div>
				</div>
				<div class="functionList" style="margin-top: 20px;" v-if="item.list.length > 0">
					<ul>
						<li v-for="list in item.list" :key="list.id" @click="itemClick(list)">
							<el-image class="listImage" :src="list.menuIcon?list.menuIcon:$globalData.defaultImg" fit="cover"></el-image>
							<div class="listTitle">{{list.menuName}}</div>
						</li>
					</ul>
				</div>
				<div v-else class="noData">暂无数据</div>
			</el-collapse-item>
		</el-collapse>
		<div class="downloadBox">
			<span>
				<img slot="prefix" src="@/assets/image/working/manual.png" alt="">
				使用手册
			</span>
			<span>
				<img slot="prefix" src="@/assets/image/working/download.png" alt="">
				下载客户端
			</span>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'fonctionList',
		data() {
			return {
				pageData: '',
				unfoldData: '', // 需要展开的数据
				foldData: '', // 需要折叠的数据
				userId: '',
				companyId: '',
			}
		},
		mounted() {
			setTimeout(() => {
				let store = this.$store.state.user
				this.userId = store.userInfo.id
				this.companyId = this.$store.state.company.companyId
				// console.log(this.companyId)
				// if(this.companyId){
				this.getPageData()
				// }
			}, 600)
		},
		methods: {
			itemClick(item) {
				// 菜单点击事件
				// /addresslist/interior/schedule
				// console.log(url)
				sessionStorage.setItem('menuName', item.labelName)
				if (item.labelName === '账号注销') {
					// console.log(item.labelName)
					this.cancelAccountUsers()
				}
				console.log(item);
				if (item.probation == '1' || item.probationUrl == null ) {
					this.$router.push(`${item.menuUrl}?t=${new Date().getTime()}`)
				}else{
					this.$router.push(`${item.probationUrl}?t=${new Date().getTime()}&id=${item.id}`)
				}
				// this.$store.commit('set_companyName', '')
				// this.$router.push(`${url}?t=${new Date().getTime()}`)
			},
			
			getPageData() {
				// 获取快捷功能入口列表
				this.$request.get(this.$api.queryWebMenu, {
					userId: this.userId,
					companyId: this.companyId
				}).then(res => {
					if (res.code == 200) {
						this.pageData = res.data
						//调试智能装备使用页
						// this.pageData[0][2].list[2].menuUrl = '/IntelligentEquipmenTry'
						this.unfoldData = this.pageData[0] // 需要展开的数据
						// console.log(this.unfoldData)
						this.foldData = this.pageData[1] // 需要折叠的数据
						// 按钮权限
						sessionStorage.removeItem('buttonJurisdiction')
						try{
							let jurisdiction = []
							this.pageData['button'].forEach(v=>{
								jurisdiction.push(v.menuName)
							})
							// sessionStorage.remove('buttonJurisdiction')
							sessionStorage.setItem("buttonJurisdiction", jurisdiction)
						}catch(e){
							//TODO handle the exception
							throw new Error(e)
						}

						let lanjie = []
                        res.data[0].forEach(item =>{
                            if(item.list){
                                item.list.forEach(val =>{
                                    if(val.probationUrl){
                                        lanjie.push({
                                            probation:val.probation,
                                            probationUrl:val.probationUrl,
											menuName:val.menuName
                                        })
                                    }
                                })
                            }
                        })
						sessionStorage.setItem("probation",JSON.stringify(lanjie))
					}
				})
			},
			clickguanli(item) {
				//        
				this.$parent.$data.fonctionCut = false
				sessionStorage.setItem('pageMenu', JSON.stringify(item))

			}
		}
	}
</script>

<style scoped="scoped">
	.functionTitle {
		color: #333333;
		font-size: 16px;
		margin-bottom: 20px;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		flex-direction: row;
	}

	.managementBtn {
		color: #23B14D;
		font-size: 16px;
		cursor: pointer;
	}

	.managementBtnIcon {
		margin-right: 5px;
	}

	.functionList {
		width: 100%;

	}

	.functionList ul {
		display: flex;
		justify-content: start;
		flex-wrap: wrap;
		flex-direction: row;
	}

	.functionList li {
		width: 180px;
		height: 60px;
		padding: 10px;
		margin-left: 40px;
		display: flex;
		justify-content: start;
		flex-wrap: nowrap;
		align-items: center;
		border-radius: 8px;
		border: 1px solid #DCDCDC;
		cursor: pointer;
		margin-bottom: 30px;
	}

	.functionList li:hover {
		border-color: #23B14D;
	}

	.functionList li:nth-child(4n+1) {
		margin-left: 0;
	}

	.listImage {
		width: 40px;
		height: 40px;
		margin-right: 10px;
		/* display: inline-block; */
	}

	.listTitle {
		font-size: 16px;
		color: #222222;
		/* display: inline-block; */
	}

	.collapseTitle {
		margin-bottom: 0;
		position: relative;
		width: 100%;
	}

	.managementBtnBoxRight {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.functionBox>>>.el-collapse-item__content {
		padding-bottom: 0;
	}

	.functionBox>>>.el-collapse-item__arrow {
		margin: 0 auto 0 -90%;
		position: relative;
	}

	.noData {
		padding: 20px 0;
		text-align: center;
		color: #AAAAAA;
	}

	.downloadBox {
		width: 100%;
		text-align: right;
		color: #AAAAAA;
		font-size: 12px;
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-end;
		margin-top: 20px;
	}

	.downloadBox span {
		margin-left: 40px;
		cursor: pointer;
		position: relative;
	}

	.downloadBox span:nth-child(1)::after {
		position: absolute;
		content: '';
		width: 1px;
		height: 16px;
		background: #AAAAAA;
		right: -20px;
	}

	.downloadBox img {
		float: left;
		width: 14px;
		height: 14px;
		margin-right: 5px;
	}
</style>
